<script setup lang="ts">
import { list } from "./dataList";
import { reactive, ref } from "vue";
const dataList = reactive(list);
import { Platform, CirclePlus, Delete, Plus } from "@element-plus/icons-vue";
import inputArr from "./components/inputarr.vue";
import imageArr from "./components/imagearr.vue";
import fileArr from "./components/filrarr.vue";
const delClick = (list, index) => {
  dataList[index].children = list;
};
const addClick = (index, type) => {
  let obj = {};
  if (type == "input") {
    obj = {
      title: "",
      content: ""
    };
  } else if (type == "image") {
    obj = {
      imageList: [],
      content: ""
    };
  } else {
    obj = {};
  }
  const children = dataList[index]["children"] || [];
  children.push(obj);
  dataList[index]["children"] = children;
};
const delMethods = index => {
  dataList.splice(index, 1);
};
const command = type => {
  let obj = {};
  obj = {
    title: "",
    type,
    children: []
  };
  dataList.push(obj);
};
const dropdownRef = ref();
import { useRouter } from "vue-router";
const router = useRouter();
const ruleForm = reactive({
  year: "",
  name: "",
  num: "",
  people: ""
});
import addArea from "@/views/project/application/edit/firstStep/area.vue";
import tagArr from "@/views/sponsor/info/tagArr.vue";
const goBack = () => {
  router.push({
    name: "projectCarryDetails",
    query: { id: 1 }
  });
};
</script>

<template>
  <el-card :body-style="{ padding: '10px' }" class="m-[20px]">
    <template #header>
      <el-page-header @back="goBack">
        <template #content>
          <div
            class="text-[20px] font-bold flex justify-center w-full relative items-center"
          >
            <div class="text-[12px] absolute left-0">2024年，浙江省</div>
            <span class="text-[20px] font-bold">
              归属项目：2024年度市级公益创投项目
            </span>
          </div>
        </template>
      </el-page-header>
    </template>
    <div class="text-[16px] mt-[15px] mb-[20px]">
      <span class="font-bold">项目名称：</span
      >社区邻里国际共融服务项目（上城区、滨江区、钱塘区）
    </div>
    <el-form label-width="100px">
      <el-form-item label="活动时间">
        <el-date-picker
          v-model="ruleForm.year"
          clearable
          type="daterange"
          range-separator="至"
          style="width: 230px"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="请选择时间"
        />
      </el-form-item>
      <el-form-item label="活动主题">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入活动主题"
          clearable
        />
      </el-form-item>
      <el-form-item label="收益人数">
        <el-input
          v-model="ruleForm.num"
          placeholder="请输入收益人数"
          clearable
        />
      </el-form-item>
      <el-form-item label="主讲人/专家">
        <el-input
          v-model="ruleForm.people"
          placeholder="请输入主讲人/专家数"
          clearable
        />
      </el-form-item>
      <el-form-item label="活动地点" class="!w-full">
        <addArea />
      </el-form-item>
      <el-form-item label="组织成员" class="!w-full">
        <tagArr
          :list="['张小小', '孙小小']"
          placeholder="请输入组织成员"
          :max-num="10"
        />
      </el-form-item>
      <el-form-item label="志愿者" class="!w-full">
        <tagArr
          :list="['张小小', '孙小小']"
          placeholder="请输入志愿者"
          :max-num="10"
        />
      </el-form-item>
    </el-form>
    <div v-for="(item, index) in dataList" class="mb-[40px]">
      <div class="flex items-center justify-between">
        <div class="flex !w-1/2 items-center">
          <el-icon class="mr-[10px]" :size="30" color="#409EFF"
            ><Platform :size="90"
          /></el-icon>
          <el-input v-model="item.title" placeholder="请输入标题"></el-input>
        </div>
        <div>
          <el-button
            type="primary"
            :icon="CirclePlus"
            link
            @click="addClick(index, item.type)"
            v-if="item.type !== 'file'"
            >新增活动</el-button
          >
          <el-button
            type="danger"
            :icon="Delete"
            link
            @click="delMethods(index)"
            >删除</el-button
          >
        </div>
      </div>
      <div
        class="p-[20px] mt-[20px] rounded-[4px]"
        style="background: #f7f8fa"
        v-if="item.type == 'input'"
      >
        <inputArr
          :lists="item.children"
          @delClick="lists => delClick(lists, index)"
        />
      </div>
      <imageArr
        v-if="item.type == 'image'"
        :lists="item.children"
        @delClick="lists => delClick(lists, index)"
      />
      <div
        class="p-[20px] mt-[20px] rounded-[4px]"
        style="background: #f7f8fa"
        v-if="item.type == 'file'"
      >
        <fileArr :lists="item.children" />
      </div>
    </div>
    <div class="h-[50px] flex justify-center items-center addclicks">
      <el-icon><Plus /></el-icon>
      <el-dropdown @command="command" ref="dropdownRef">
        新增产出
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="input">文本类型</el-dropdown-item>
            <el-dropdown-item command="image">图片类型</el-dropdown-item>
            <el-dropdown-item command="file">文件类型</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <div class="h-[40px]"></div>
    <div
      class="flex justify-center m-[10px] w-full p-[20px] bg-white shadow shadow-zinc-200 -left-[10px] relative"
    >
      <el-button
        @click="
          router.push({ name: 'projectCarryDetails', query: { id: '1' } })
        "
        >取消</el-button
      >
      <el-button
        @click="
          router.push({ name: 'projectCarryDetails', query: { id: '1' } })
        "
        >保存草稿</el-button
      >

      <el-button
        type="primary"
        @click="
          router.push({ name: 'projectCarryDetails', query: { id: '1' } })
        "
        >提交</el-button
      >
    </div>
  </el-card>
  <div class="h-[80px]"></div>
</template>

<style lang="scss" scoped>
.addclicks {
  border: 1px dashed #409eff;
  :deep(.el-menu--horizontal) {
    height: 35px;
    border-bottom: none;
  }
}
.el-form {
  display: flex;
  flex-wrap: wrap;
  &-item {
    width: 50%;
  }
}
:deep(.el-page-header__header) {
  .el-page-header__left {
    flex: auto;
    flex-direction: row;
    .el-page-header__content {
      flex-grow: 1;
    }
  }

  width: 100%;
}
</style>
